<template>
  <div class="page-container">
    <!--搜索条件部分-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >

        <!-- 查询 重置 新增 刷新 列显示 导出-->
        <el-row class="search-button mt20">
          <!-- <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item> -->
           <el-form-item>
            <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd"/>
          </el-form-item>
          <!-- <el-form-item style="float:right">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item> -->
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:20px;padding-right:15px;">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350" 
        :columns="detailColumns" 
        :data="pageResult"
        @findPage="findPageMock"
        :showEditOperation=false
        :showCustomOperation=true
        :showBatchDelete=false
        :showPagenation=false
        :showSelection=false
        :showDetailOperation=true
        :showDeleteOperation=false
        :customLabel="'查看报表分析'"
        @handleCustom="checkReport"
        selectionChange="selectionChange"
        @handleDetail="handleDetail" 
        @handleEdit="handleEdit"
        :operationWidth=300
        ref="CyTable">
    </cy-table>

    <!--新增添加页面界面-->
    <el-dialog title="添加活动" width="70%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @closed="handleClose" v-if="editDialogVisible">
      <el-form  :inline="true" :model="dataForm" label-width="125px" :rules="dataFormRules" ref="dataForm" :size="size" >
          <el-row class="searchDialog-input">
             <el-form-item label="关联年度：" prop="year">
            <el-select v-model="addForm.year"  placeholder="关联年度" style="width:200px">
              <el-option label="2019年" value="1"></el-option>
              <el-option label="2018年" value="2"></el-option>
              <el-option label="2017年" value="3"></el-option>
              <el-option label="2016年" value="4"></el-option>
              <el-option label="2015年" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动名称：" prop="name">
            <el-select v-model="addForm.name"  placeholder="活动名称" style="width:200px">
              <el-option label="限时秒杀" value="1"></el-option>
              <el-option label="万人团购" value="2"></el-option>
              <el-option label="周末不打烊" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型：" prop="type">
            <el-select v-model="addForm.type"  placeholder="活动类型" style="width:200px">
              <el-option label="拉新" value="1"></el-option>
              <el-option label="促活" value="2"></el-option>
              <el-option label="留存" value="3"></el-option>
              <el-option label="裂变" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预计参与人数：" prop="predictPerson">
            <el-input v-model="addForm.predictPerson" placeholder="预计参与人数"></el-input>
          </el-form-item>
          <el-form-item label="实际参与人数：" prop="practicalPerson">
            <el-input v-model="addForm.practicalPerson" placeholder="实际参与人数"></el-input>
          </el-form-item>
          <el-form-item label="预计投入成本：" label-width="132px" prop="predictCost">
           <el-input v-model="addForm.predictCost" placeholder="预计投入成本"></el-input>
          </el-form-item>
          <el-form-item label="实际投入成本：" label-width="132px" prop="practicaltCost">
           <el-input v-model="addForm.practicaltCost" placeholder="实际投入成本"></el-input>
          </el-form-item>
          <el-form-item label="预计投入额：" label-width="130px" prop="predictCostMonet">
           <el-input v-model="addForm.predictCostMonet" placeholder="预计投入额"></el-input>
          </el-form-item>
          <el-form-item label="实际投入额：" prop="practicalCostMonet">
           <el-input v-model="addForm.practicalCostMonet" placeholder="实际投入额"></el-input>
          </el-form-item>
          <el-form-item label="实际投入人数：" label-width="132px" prop="predictCostPerson">
           <el-input v-model="addForm.predictCostPerson" placeholder="实际投入人数"></el-input>
          </el-form-item>
          <el-form-item label="复购数：" label-width="132px" prop="reBuyNumber">
           <el-input v-model="addForm.reBuyNumber" placeholder="复购数"></el-input>
          </el-form-item>
          <el-form-item label="预计营销额：" label-width="130px" prop="predictTurnover">
           <el-input v-model="addForm.predictTurnover" placeholder="预计营销额"></el-input>
          </el-form-item>
          </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading" >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    data() {
      return {
        // 添加活动数据
        addForm: {
          year: '',               // 关联年度
          name: '',               // 活动名称
          type: '',               // 活动类型
          predictPerson: '',      // 预计参与人数
          practicalPerson: '',    // 实际参与人数
          predictCost: '',        // 预计投入成本 
          practicaltCost: '',     // 实际投入成本 
          predictCostMonet: '',   // 预计投入额
          practicalCostMonet: '', // 实际投入额
          predictCostPerson: '',  // 实际投入人数
          reBuyNumber: '',        // 复购数
          predictTurnover: '',    // 预计营业额
        },
        content: '',
        editorOption:{
          modules:{
            imageDrop:true,
          },
          theme:'snow'
        },
        size: "small",
        filters: { },
        columns: [],
        filterColumns: [],
        // 列表模拟数据
        detailColumns: [
          {prop: "date", label: "年度/月份", minWidth: 120},
          
          {prop: "targetNumber", label: "完成目标总额", minWidth: 120},
          {prop: "practicalNumber", label: "实际总额", minWidth: 120},
          {prop: "planCost", label: "计划总成本", minWidth: 120},
          {prop: "practicalCost", label: "实际总成本", minWidth: 120},
        ],
        pageResultDetail: {
          "rows":
            [
              {
                "date": "2020年",
                "targetNumber": "12000万",
                "practicalNumber": "1200万",
                "planCost": "12000万",
                "practicalCost": "1200万",
              },
              {
                "date": "2019年",
                "targetNumber": "10000万",
                "practicalNumber": "9347万",
                "planCost": "9000万",
                "practicalCost": "8640万",
              },
              {
                "date": "2018年",
                "targetNumber": "8000万",
                "practicalNumber": "7670万",
                "planCost": "7000万",
                "practicalCost": "69454万",
              },
              {
                "date": "2017年",
                "targetNumber": "8000万",
                "practicalNumber": "7340万",
                "planCost": "8000万",
                "practicalCost": "7640万",
              },
              {
                "date": "2016年",
                "targetNumber": "8100万",
                "practicalNumber": "7697万",
                "planCost": "7600万",
                "practicalCost": "7340万",
              },
              {
                "date": "2015年",
                "targetNumber": "7000万",
                "practicalNumber": "6540万",
                "planCost": "7000万",
                "practicalCost": "6320万",
              },
              {
                "date": "2014年",
                "targetNumber": "5000万",
                "practicalNumber": "4438万",
                "planCost": "5000万",
                "practicalCost": "4866万",
              },
              {
                "date": "2013年",
                "targetNumber": "4000万",
                "practicalNumber": "3427万",
                "planCost": "3500万",
                "practicalCost": "3240万",
              },
              {
                "date": "2012年",
                "targetNumber": "3000万",
                "practicalNumber": "2600万",
                "planCost": "2600万",
                "practicalCost": "2340万",
              },
              {
                "date": "2011年",
                "targetNumber": "2100万",
                "practicalNumber": "1990万",
                "planCost": "2000万",
                "practicalCost": "1400万",
              },
              {
                "date": "2010年",
                "targetNumber": "1100万",
                "practicalNumber": "900万",
                "planCost": "2000万",
                "practicalCost": "1400万",
              }
            ],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
          replyContent: [{required: true, message: "回复内容", trigger: "blur"}]
        },
        // 新增编辑界面数据
        dataForm: {
          serveno: "",
          status: ""
        },
        shopList: [],
        statusList: [],
        checked: []
      };
    },
    methods: {
      //mock数据
      findPageMock : function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },

      clinkMock: function () {
        this.$refs.CyTable.findPageMock(this.clickDetail)
      },
      // 跳转到分析报表页面
      checkReport(value) {
        this.$router.push({path:"/pages/promotionManagement/statementAnalysis",query:{}});
      },
       // 跳转到月度明细页面
      handleDetail: function (data) {
        this.$router.push({path:"/pages/promotionManagement/MonthlyTarget",query:{}});
      },

      // 显示新增界面
      handleAdd: function () {
        this.editDialogVisible = true;
        this.operation = true;
        this.resetForm("dataForm");
      },
      handleClose() {
      this.dataForm={}
      //this.clearFiles();
      this.$refs.dataForm.resetFields();
    },
      //选择框
      selectionChange: function (params) {
        this.checked = params.selections
      },
      // 编辑页面
      handleEdit: function (data) {
       this.$router.push({path:"/MerchantEditPage",query:{cid:data.row.id,storeid:data.row.storeId}});
      },
     
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              var this_ = this;
              this_.$message({message: "操作成功", type: "success"});
              this_.editDialogVisible = false;
            });
          }
        });
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property]);
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.filters={};
          this.findPage(null);
        }
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns=[
          {prop: "orgNumber", label: "商家编号", minWidth: 50},
          {prop: "merchantType", label: "商家类型", minWidth: 120,formatter: this.type},
          {prop: "status", label: "商家状态	", minWidth: 120,formatter: this.status},
          {prop: "name", label: "商家名称", minWidth: 120},
          {prop: "contactName", label: "联系人", minWidth: 120},
          {prop: "contactTelephone", label: "联系人手机", minWidth: 120},
          {prop: "createTime", label: "注册时间", minWidth: 120},];
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      type: function(row, column, cellValue, index){
          if(cellValue==1){
            return '自营'
          }else if(cellValue==2){
            return '第三方商户'
          }
     },
     status: function(row, column, cellValue, index){
          if(cellValue==1){
            return '待审核'
          }else if(cellValue==2){
            return '审核通过'
          }else{
             return '审核不通过'
          }
	   },
      //列表下载
      downloadExcel() {
        this.$confirm("确定下载列表文件?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let filename = "商家管理";
            this.$refs.JicTable.exportData(
              this.filters,
              this.filterColumns,
              filename
            );
          })
          .catch(() => {
        });
      }
    },
    mounted() {
      this.initColumns()
      this.findPageMock();
    }
  };
</script>

<style lang='scss' scoped>
</style>
